<template>
  <div>
    <!-- 创建工具栏组件 -->
    <!--<div id="toolbar">
            <span class="ql-formats">
              <button class="ql-bold">Bold</button>&lt;!&ndash;控制粗细&ndash;&gt;
              <button class="ql-italic">Italic</button>    &lt;!&ndash;控制切斜&ndash;&gt;
              <button class="ql-underline">下划线</button>    &lt;!&ndash;下划线&ndash;&gt;
              <button class="ql-link">link</button>    &lt;!&ndash;链接&ndash;&gt;
          </span>
      <span class="ql-formats">
              <button class="ql-list" value="ordered"></button>&lt;!&ndash;序号&ndash;&gt;
              <button class="ql-list" value="bullet"></button>    &lt;!&ndash;点&ndash;&gt;
              <button class="ql-list" value="ql-blockquote"></button>    &lt;!&ndash;引用&ndash;&gt;
              <button class="ql-code-block"></button>    &lt;!&ndash;代码&ndash;&gt;
              <button class="ql-image" value="bullet"></button>    &lt;!&ndash;图片&ndash;&gt;
          </span>
      <span class="ql-formats">
            <select class="ql-color">
              <option selected></option>
              <option value="red"></option>
              <option value="orange"></option>
              <option value="yellow"></option>
              <option value="green"></option>
              <option value="blue"></option>
              <option value="purple"></option>
            </select>
            <select class="ql-background">
              <option selected></option>
              <option value="red"></option>
              <option value="orange"></option>
              <option value="yellow"></option>
              <option value="green"></option>
              <option value="blue"></option>
              <option value="purple"></option>
            </select>
          </span>
      <span class="ql-formats">&lt;!&ndash;控制大小&ndash;&gt;
            <select class="ql-size">
              <option value="10px">小字体</option>
              <option selected>中字体</option>
              <option value="18px">大字体</option>
              <option value="32px">超大字</option>
            </select>
          </span>
    </div>-->

    <!-- 创建文本编辑器 -->
    <div id="editor-div" :style="{minHeight: ckEditorContHeight + 'px'}">
    </div>

    <input type="file" id="checkImg" style="display: none" accept="image/*" @change="addFile">
  </div>

</template>
<style>
  /*编辑器样式修改*/
  .ql-snow .ql-picker.ql-size .ql-picker-label::before {
    content: '中字体';
  }

  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
  }

  #editor-div {
    min-height: 300px;
    height: 100%;
  }

  #editor-div .ql-editor {
    height: 100%;
    width: 100%;
  }
</style>
<script>
  import String from '../../js/mod.string';
  import Http from '../../js/mod.http';
  import ToastUtils from '../../mod/utils.toast';
  import strings from "../../assets/strings"

  export default {
    props: ['content', 'isEditor', 'ckHeight'],
    components: {},
    data() {
      return {
        is_editor: false,
        ckEditorContHeight: 350,

        editorOption: null,

      }
    },
    created: function () {
      var _this = this;
      _this.$f7.utils.nextTick(function () {
        var ckEditorContHeight = parseInt(_this.ckHeight) - 80;
        _this.ckEditorContHeight = ckEditorContHeight;

        var BackgroundClass = Quill.import('attributors/class/background');
        var ColorClass = Quill.import('attributors/class/color');
        var SizeStyle = Quill.import('attributors/style/size');
        Quill.register(BackgroundClass, true);
        Quill.register(ColorClass, true);
        Quill.register(SizeStyle, true);

        var toolbarOptions = [
          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
          ['blockquote', 'code-block'],
          [{'header': [1, 2, 3, 4, 5, 6, false]}],
          [{'header': 1}, {'header': 2}],               // custom button values
          [{'list': 'ordered'}, {'list': 'bullet'}],
//          [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
//          [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
//          [{'direction': 'rtl'}],                         // text direction
//          [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
//          [{'color': []}, {'background': []}],          // dropdown with defaults from theme
//          [{'font': []}],
          [{'align': []}],
          ['image', 'clean']                                         // remove formatting button
        ];

        _this.editorOption = new Quill('#editor-div', {
          modules: {
            toolbar: toolbarOptions,
            //imageDrop: true,
          },
          placeholder: '编辑内容...',
          theme: 'snow' // bubble snow
        });

        if (_this.content) {
          _this.editorOption.container.firstChild.innerHTML = _this.content;
        }

        let toolbar = _this.editorOption.getModule('toolbar');
        toolbar.addHandler('image', () => {
          //_this.$$('div').blur();
          document.getElementById('checkImg').click();
        });

        _this.$emit('editor', _this.editorOption);
        _this.$$('#editor-div .ql-editor').css('minHeight',
            ckEditorContHeight + 'px');

      });
    },
    watch: {},
    beforeDestroy() {
    },
    computed: {},
    methods: {
      addFile: function () {
        let _this = this;
        let inputObj = document.getElementById('checkImg');
        let fileObj = inputObj.files[0];
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
          ToastUtils.toast.show(ToastUtils.param.toast(
              {text: strings.toast["not-null"].image}));
          return;
        }

        let fileName = fileObj.name;
        let fileTypeStr = fileObj.type;
        let fileTypeArr = fileTypeStr.split('/');
        let fileType = fileTypeArr[0].trim();
        let to_url = '';
        if (fileType == 'image') {
          to_url = Http.kInterfacePath.file.upload;
        } else {
          to_url = Http.kInterfacePath.file.uploadFile;
        }
        let formFile = new FormData();
        formFile.append("file", fileObj); //加入文件对象
        if (_this.keepSize) {
          to_url = Http.kInterfacePath.file.addPhoto;
        }
        let data = formFile;
        let _errorFileUpload = (err) => {
          Http.httpErrorDeal(_this, err);
        };
        let params = {
          url: to_url,
          type: Http.httpType.post,
          data: data,
          success: _successFileUpload,
          error: _errorFileUpload,
        };
        Http.ajax(_this, params);

        function _successFileUpload(res) {
          let resData = res.data ? res.data : null;
          if (resData != undefined && resData != null && resData != '') {
            var urlp = resData.urlp;
            const range = _this.editorOption.getSelection();
            if (range) {
              _this.editorOption.insertEmbed(range.index, 'image', urlp);
            }
          }
        }
      },
    }
  }
</script>
